<template>
  <div>
    <!-- 头部 -->
    <el-card class="head-content">
      <div class="head-content-box">
        <span class="head-content-txt">作者管理</span>
        <div style="width: 1px;height: 50px;background-color: #797979; margin-left: 20px;" />
        <div class="head-content-txt-newlyAdded" @click="add">
          <i class="el-icon-circle-plus-outline head-content-txt-newlyAdded-icon" />
          <span class="head-content-txt-newlyAdded-txt">新增作者</span>
        </div>
      </div>
    </el-card>
    <!-- 表格 -->
    <el-card class="form-content">
      <el-form ref="form" :model="query" :inline="true" size="small">
        <el-form-item>
          <el-input v-model="query.authorName" placeholder="请输入作者名称关键词" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="query.status" placeholder="请选择状态">
            <el-option label="全部" value="" />
            <el-option label="启用" value="Y" />
            <el-option label="禁用" value="N" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fetchData('init')">搜索</el-button>
          <el-button type="primary" @click="empty">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="authorName" label="作者名称" align="center" />
        <el-table-column label="头像" align="center">
          <template slot-scope="scope">
            <el-image :src="scope.row.headPath" alt="" fit="contain" style="width: 80px; height: 80px;" /></el-image></template>
        </el-table-column>
        <el-table-column prop="articleCnt" label="文章数量" align="center" />
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">{{ scope.row.status == 'Y'? '启用':'禁用' }}</template>
        </el-table-column>
        <el-table-column prop="createTm" label="添加时间" align="center">
          <template slot-scope="scope">
            <span>{{ dayjs(scope.row.createTm).format('YYYY-MM-DD HH:mm:ss') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="orderSn" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="edit(scope.row)">编辑</el-button>
            <el-button type="text" :disabled="scope.row.articleCnt > 0" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">

        <el-pagination
          :current-page="page.currentpage"
          :page-size="page.pageSize"
          layout="total, prev, pager, next"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <!-- 新增、编辑 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="50%">
      <el-form ref="formS" :model="formS" size="small" label-width="80px" :rules="rules">

        <el-form-item label="作者名称" prop="authorName">
          <el-input v-model="formS.authorName" placeholder="请输入作者名称" type="text" />
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="formS.status">
            <el-radio label="Y">启用</el-radio>
            <el-radio label="N">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 上传图片 -->
        <el-form-item label="头像" prop="headPath">
          <el-upload
            class="fl app-uploader-img-plus"
            :action="actionUrl"
            :show-file-list="false"
            :headers="uploadHeaders"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <el-image
              v-if="formS.headPath"
              class="avatar"
              style="width: 100px; height: 100px"
              :src="formS.headPath"
              fit="contain"
            />
            <i v-else class="el-icon-plus app-uploader-img-plus-icon" />
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button @click="back">取消</el-button>
          <el-button type="primary" @click="preservation">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  authorInfoList,
  authorInfoAdd,
  authorInfoDel,
  authorInfoUpd } from '@/api/knowledge'
import { imgUploadUrl } from '@/api/upload'
import dayjs from 'dayjs'
export default {
  data() {
    return {
      dayjs,
      dialogFormVisible: false, // 新增作者模态框
      uploadHeaders: {},
      actionUrl: imgUploadUrl,
      dialogTitle: '',
      query: {
        authorName: '', // 作者名称
        status: '' // 选择状态
      },
      formS: {
        authorName: '', // 作者名称
        status: '', // 选择状态
        headPath: '' // 上传的头像
      },
      tableData: [],
      rules: {
        authorName: [
          { required: true, message: '请输入作者名称', trigger: 'blur' }
        ],
        headPath: [
          { required: true, message: '请上传作者头像', trigger: 'change' }
        ],
        status: [
          { required: true, message: '请上选择状态', trigger: 'change' }
        ]
      },
      // 分页对象
      page: {
        currentpage: 1,
        pageSizes: [10, 15, 20, 25],
        pageSize: 10,
        total: 0
      }
    }
  },
  mounted() {
    const { pageType } = this.$route.query
    if (pageType == 'noDataAdd') {
      this.add()
    }
    this.fetchData()
  },
  methods: {
    handleAvatarSuccess(res, file) {
      if (res.code === 0) {
        this.formS.headPath = res.data.baseUrl + res.data.path
      } else {
        this.$message.error(res.msg)
      }
    },
    // 上传前处理
    beforeAvatarUpload(file) {
      return this.$beforeUploadImg(file, this, 1000, 1000, 1)
    },
    // 保存
    preservation() {
      this.$refs['formS'].validate((valid) => {
        if (valid) {
          const fun = this.formS.id ? authorInfoUpd : authorInfoAdd
          fun(this.formS).then(res => {
            this.$message.success('操作成功！')
            this.dialogFormVisible = false
            this.fetchData('init')
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 返回
    back() {
      this.dialogFormVisible = false
    },
    // 编辑
    edit(row) {
      this.dialogTitle = '编辑'
      this.formS = {
        id: row.id,
        authorName: row.authorName, // 作者名称
        status: row.status, // 选择状态
        headPath: row.headPath // 上传的头像
      }
      this.dialogFormVisible = true
    },
    // 新增作者
    add() {
      this.dialogTitle = '新增'
      this.formS = {
        authorName: '', // 作者名称
        status: 'N', // 选择状态
        headPath: '' // 上传的头像
      }
      this.dialogFormVisible = true
    },
    // 搜索
    fetchData(type) {
      if (type == 'init') {
        this.page = {
          ...this.page,
          currentpage: 1
        }
      }
      const obj = {
        currentPage: this.page.currentpage,
        pageSize: this.page.pageSize,
        ...this.query
      }
      console.log('submit!', obj)
      authorInfoList(obj).then(res => {
        console.log('authorInfoList', res)
        const { list, total } = res.data
        this.tableData = list
        this.page.total = total
      }).catch(res => {
        console.log('res', res)
        this.tableData = []
        this.page.total = 0
        this.page.currentpage = 1
      })
    },
    // 重置
    empty() {
      this.query = {
        authorName: '',
        status: ''
      }
      this.fetchData('init')
    },
    // 删除
    del({ id }) {
      this.$confirm('此操作将永久删除该作者, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        authorInfoDel({ id }).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.fetchData('init')
        })
      })
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.page.currentpage = val
      this.fetchData()
    }

  }
}
</script>

<style lang="scss" scoped="scoped">
  .app-uploader-img-plus {
    width: 100px;
    height: 100px;
    border: 1px dotted #ddd;
    .avatar{
      width: 100px;
      height: 100px;
    }
    .app-uploader-img-plus-icon {
      font-size: 28px;
      color: #8c939d;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
    }
  }
  .head-content {
    width: 100%;

    .head-content-box {
      display: flex;
      align-items: center;

      .head-content-txt {
        font-size: 24px;
        font-weight: 500;
      }

      .head-content-txt-newlyAdded {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 3%;

        .head-content-txt-newlyAdded-icon {
          font-size: 28px;
        }

        .head-content-txt-newlyAdded-txt {
          font-size: 14px;
        }
      }
    }
  }
</style>
